<template>
  <div>
    <div class="top-user-bar">
      <!-- <div class="arrow"> 《 </div> -->
      <div class="top-user-bar-container">
        <top-user v-for="i in 20" :key="i"></top-user>
      </div>
      <!-- <div class="arrow">》</div> -->
    </div>
    <div class="top-user-container">
      <div class="top-user-container-left">
        <div class="card">
          <div class="card-title">
            <div class="card-title-main">
              <span>最佳推荐人</span>
            </div>
            <div class="card-title-sub">
              <span>日榜</span><span>周榜</span><span>月榜</span
              ><span>总榜</span>
            </div>
          </div>
          <div class="card-content">
            <left-list></left-list>
            <left-list></left-list>
            <left-list></left-list>
          </div>
        </div>
        <div class="card">
          <div class="card-title">
            <div class="card-title-main">
              <span>喜欢的人</span>
            </div>
            <!-- <div class="card-title-sub">
              <span>日榜</span><span>周榜</span><span>月榜</span
              ><span>总榜</span>
            </div> -->
          </div>
          <div class="card-content">
            <left-list></left-list>
          </div>
        </div>
        <div class="card">
          <div class="card-title">
            <div class="card-title-main">
              <span>志同道合的人</span>
            </div>
            <!-- <div class="card-title-sub">
              <span>日榜</span><span>周榜</span><span>月榜</span
              ><span>总榜</span>
            </div> -->
          </div>
          <div class="card-content">
            <left-list></left-list>
          </div>
        </div>
      </div>
      <div class="top-user-container-right">
        <waveform />
        <waveform />
        <waveform />
        <waveform />
        <waveform />
        <waveform />
      </div>
    </div>

    <div class="notice-box">
      <div class="notice-user">
        <div class="notice-msg">
          <div>3分钟前</div>
          <div>用户名称</div>
        </div>
        <div class="notice-img">
          <img :src="require('@/assets/cover4.jpg')" alt="" />
        </div>
      </div>
      <div class="notice-user">
        <div class="notice-msg">
          <div>3分钟前</div>
          <div>用户名称</div>
        </div>
        <div class="notice-img">
          <img :src="require('@/assets/cover4.jpg')" alt="" />
        </div>
      </div>
      <div class="notice-user">
        <div class="notice-msg">
          <div>3分钟前</div>
          <div>用户名称</div>
        </div>
        <div class="notice-img">
          <img :src="require('@/assets/cover4.jpg')" alt="" />
        </div>
      </div>
    </div>
    <!-- model -->
    <div class="chat-model" v-if="chatVis">
      <div class="chat-title">
        <div class="chat-left">
          <img class="com-img" :src="require('@/assets/0005.png')" alt="" />

          &nbsp;<span>name</span>
          &nbsp;
          <span>(正在与对方讲话)</span>
        </div>
        <div>
          <img
            style="
              position: absolute;
              width: 24px;
              height: 24px;
              z-index: 1;
              right: 8px;
              top: 2px;
            "
            :src="require('@/assets/close.png')"
            alt=""
            @click="chatVis = false"
          />
        </div>
      </div>
      <div>
        <div class="chart-item">
          <div>12:00</div>
          <div>
            <img class="com-img" :src="require('@/assets/0005.png')" alt="" />
            <div>这里是消息这里是消息</div>
            <img :src="require('@/assets/对勾.png')" alt="" />
          </div>
        </div>
        <div class="chart-item">
          <div>12:20</div>
          <div>
            <div>这里是消息这里是消息</div>
            <img class="com-img" :src="require('@/assets/0005.png')" alt="" />
            <!-- <img :src="require('@/assets/对勾.png')" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="chat-input">
        <input placeholder="请输入内容" type="text" name="" id="" />
        <img class="chat-input-1" :src="require('@/assets/play-t.png')" alt="" />
        <img class="chat-input-2" :src="require('@/assets/play-t.png')" alt="" />
      </div>
    </div>

    <div class="song-model" v-show="songListVis">
      <img
        style="
          position: absolute;
          width: 24px;
          height: 24px;
          z-index: 1;
          right: 8px;
          top: 2px;
        "
        :src="require('@/assets/close.png')"
        alt=""
        @click="songListVis = false"
      />
      <div class="song-model-song">
        <waveform :width="450" />
      </div>
      <div class="song-model-content">
        <div class="song-model-content-left">
          <div @click="current = 0">我的收藏</div>
          <div @click="current = 1">我的歌单</div>
          <div @click="current = 2">我的喜欢</div>
          <div @click="current = 3">创建歌单</div>
        </div>
        <div class="song-model-content-right">
          <template v-if="current == 0">
            <div class="song2">
              <div class="song2-title">歌单详情</div>
              <div class="song2-content">
                <song-list-2></song-list-2>
                <song-list-2></song-list-2>
                <song-list-2></song-list-2>
              </div>
            </div>
          </template>
          <!-- <template v-if="current==0">
            <div>
              <song-list-1></song-list-1>
              <song-list-1></song-list-1>
              <song-list-1></song-list-1>
            </div>
          </template> -->
        </div>
      </div>
    </div>
    <!-- model-end -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import TopUser from "@/components/TopUser.vue";
import LeftList from "../components/LeftList.vue";
import Waveform from "../components/Waveform.vue";
import SongList1 from "../components/SongList1.vue";
import SongList2 from "../components/SongList2.vue";

export default {
  name: "Home",
  components: {
    TopUser,
    LeftList,
    Waveform,
    SongList1,
    SongList2,
  },
  data() {
    return {
      current: 0,
      songListVis: true,
      chatVis:true,
    };
  },
};
</script>

<style scoped>
.chat-model {
  position: fixed;
  right: 10px;
  top: 0;
  height: 100vh;
  width: 280px;
  background-color: #252525;
  z-index: 20;
}
.chat-title {
  height: 60px;
  background-color: rgb(90, 88, 88);
  width: 100%;
  display: flex;
  align-items: center;
}
.chat-left {
  display: flex;
  align-items: center;
}
.chat-item {
  display: flex;
}
.chart-item > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #fff;
  padding-bottom: 8px;
}
.com-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.chat-input {
  position: absolute;
  bottom: 30px;
  width: 100%;
}
.chat-input > input {
  width: 100%;
  height: 36px;
}
.chat-input-1 {
  position: absolute;
  right: 0;
  top: 12px;
}
.chat-input-2 {
  position: absolute;
  top: 12px;
  right: 24px;
}

.home {
  background-color: #313735;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top-user-bar {
  height: 120px;
  width: 100vw;
  padding: 8px 20px;
  display: flex;
  align-items: center;
}
.top-user-bar-container {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: scroll;
  
}
.arrow{
  height: 80px;
  width: 20px;
  background-color: #fff;
  color: red;
  line-height: 80px;
}


.top-user-container {
  flex: 1;
  display: flex;
}
.top-user-container-left {
  width: 240px;
  /* background: #fff; */
}
.top-user-container-right {
  /* width: 200px; */
  flex: 1;
}

.notice-box {
  position: absolute;
  top: 200px;
  right: 0;
  max-height: 80vh;
  overflow: hidden;
}
.notice-user {
  width: 120px;
  height: 36px;
  display: flex;
  font-size: 12px;
  margin-bottom: 20px;
  justify-content: flex-end;
  padding-right: 30px;
}
.notice-msg {
  /* background-color: #333231; */
}
.notice-img {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 15px;
}
.notice-msg > div:nth-child(1) {
  background-color: #333231;
  padding-right: 20px;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.notice-msg > div:nth-child(2) {
  background-color: #333231;
  padding-right: 20px;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.notice-img img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.card {
  /* color: #000000; */
}
.card-title {
  display: flex;
  padding: 2px;
  border-bottom: 1px solid lightblue;
}
.card-title-main {
  font-size: 16px;
  font-weight: bold;
  margin-right: 12px;
}
.card-title-sub {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-title-sub span {
  padding: 0 4px;
}

.video-box {
  /* width: 240px; */
  /* height: 80px; */
  display: flex;
  position: absolute;
  bottom: 120px;
  left: 0;
  justify-content: space-between;
  background-color: #2f2f31;
}
.video-img {
  height: 80px;
  width: 80px;
  background-color: #2f2f31;
  display: flex;
  align-items: center;
}
.video-img img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
}

.video-info {
  background-color: #2f2f31;
  font-size: 12px;
  display: flex;
  width: 120px;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 0;
  padding-right: 8px;
}
.song-info {
  display: flex;
  justify-content: space-between;
}
.video-song {
  width: 18px;
  line-height: 80px;
  background-color: #1d6275;
}

.video-img .song-play {
  position: absolute;
  height: 24px;
  width: 24px;
  left: 9%;
}

.s-model {
  height: 700px;
  width: 500px;
  border-radius: 20px;
  background-color: #252525;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  z-index: 10;
}
.box1 {
  display: flex;
  flex-direction: row;
}
.box1-left {
  width: 120px;
  height: 120px;
}
.box1-right {
  margin-left: 20px;
  flex: 1;
}
.box2 {
  margin: 12px 0;
}
.box3 {
  display: flex;
  justify-content: space-between;
}
.box4 {
  margin: 12px 0;
}
.box5 {
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
}
.box5-left {
  width: 70%;
}
.box5-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}

.s-notify {
  width: 400px;
  height: 100px;
  position: absolute;
  right: 0;
  top: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: gray; */
  z-index: 10;
}
.s-notify-left {
  width: 20px;
  height: 100px;
  background-color: red;
  display: flex;
  align-items: center;
}
.s-notify-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-left: 4px;
  border: 1px solid gray;
  overflow: hidden;
}
.s-notify-right {
  flex: 1;
  padding-left: 12px;
  display: inherit;
  flex-direction: column;
  justify-content: space-between;
}
.s-notify-right-time {
  display: inherit;
  justify-content: space-between;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-textarea__inner {
  background-color: #252525;
}
.el-upload-dragger {
  background-color: #252525;
}
.el-input__inner {
  background-color: #252525;
}
.el-button {
  background-color: #252525;
}
.el-upload.el-upload--text {
  height: 120px;
  width: 120px;
}
input[type="file"] {
  visibility: hidden;
}
.el-button.el-button--default span {
  background-color: unset;
}

.s-user {
  position: absolute;
  z-index: 10;
  top: 20;
  right: 100px;
  display: flex;
  align-items: center;
  top: 14px;
  width: 100px;
  justify-content: space-between;
  background: unset;
  cursor: pointer;
}
.s-user-up {
  cursor: pointer;
}
.s-user-user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.s-user-info {
  cursor: pointer;
}
.s-info-box {
  display: flex;
  border-bottom: 1px solid #441bd8;
  padding: 12px 0;
}
.s-bar-title {
  text-align: center;
}
.s-bar-title-left {
  padding: 4px 6px;
  background: #363434;
  border-bottom-left-radius: 40%;
  border-top-left-radius: 40%;
  height: 36px;
  display: inline-block;
  width: 67px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.s-bar-title-right {
  padding: 4px 6px;
  background: #363434;
  border-bottom-right-radius: 40%;
  border-top-right-radius: 40%;
  height: 36px;
  display: inline-block;
  width: 67px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.active {
  background: gray;
}

.song-model {
  width: 600px;
  height: 530px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #2f2f31;
  overflow: hidden;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
}
.song-model-song {
  width: 90%;
}

.song-model-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.song-model-content-left {
  display: flex;
  flex-direction: column;
}
.song-model-content-right {
  flex: 1;
}
.song-model-content-left > div {
  width: 100px;
  height: 100px;

  line-height: 100px;
  background: #353636;
}

.song2 {
  height: 100%;
}
.song2-title {
  background-color: #727374;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
.song2-content {
  display: flex;
}
</style>
